<template>
	<view>

		<nav-bar
			title="UME影城（重庆江北店）"
			fixed
			cover
			@on-back="$navigateBack()"
		></nav-bar>

	<view class="content">
			 <view class="header-open-list">
						<view class="item">
							<view class="title">UME影城（沙坪坝店）</view>
							<view class="t-content"><text class="time-txt">2019年9月18日 10:25 </text> 国语2D</view>
						</view>
				</view>
			<view class="n-line">尊贵的VIP用户：您可享受免费观影	</view>
			<view class="screen-title">UME影城（重庆沙坪坝店）1号厅	</view>
			<view class="pure_top"></view>
			 <view class="center-title">
				 <text class="txt">银幕中央</text>
				 </view>
				 <view class="seat-box-context-page">
						<movable-area class="seat-box-context">
								<movable-view class="movable-view" direction="all" :scale="true">
									<view class="seat-item">
										<block v-for="(item, index) in lSeat" :key="index">
											<view class="item" v-if="false == item.select" @click="onClickSeat(index)"></view>
											<view class="item-select box boxbgred iconfont icon-gouxuan" v-if="item.select" @click="onClickSeat(index)"></view>
										</block>
									</view>
								</movable-view>
						</movable-area>
						<view class="left-seat">
							 <view class="t-text" v-for="(item,index) in ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']" :key="index">
								 {{item}}
							 </view>
						</view>
				 </view>
				 <view class="seat-list-box">
					 <view class="box"></view><view class="text">可售</view>
					 <view class="box boxbg"></view><view class="text">不可售</view>
					 <view class="box boxbgred iconfont icon-gouxuan"></view><view class="text">已选</view>
					 <view class="box"></view> <view class="box noleft"></view><view class="text">情侣座</view>
					 <view class="box"></view><view class="text">震动座椅</view>
				 </view>
		</view>
		<view class="btn-footer-pay-cover"></view>
		<apple-sliver></apple-sliver>
		<view class="btn-footer-pay">
			<view	class="f-text">
				<view class="t-txt">温馨提醒：</view>
				<view> 一、1.4米以下儿童须购买儿童票，儿童需在成人陪同下观影</view>
				<view >二、出票前请核对场次信息，不支持退票改签</view>
			</view>
			<button class="btn-pay" :disabled="disabled" @click="btnBuy">{{disabled ? '请选择座位' : '确认'}}</button>
			<apple-sliver></apple-sliver>
		</view>
	</view>
</template>
<script>
import iconArrow from '../components/icon-arrow';
import NavBar from "../../components/nav-bar";

export default {

	components: {
		iconArrow,
		NavBar,
	},

	data() {
		return {
			lSeat: [],
			// disabled: true,
		}
	},

	computed: {

		disabled() {
			for (let v of this.lSeat) {
				if (v.select) {
					return false;
				}
			}
			return true;
		}

	},

	onLoad() {
		this.getLSeat();
	},

	methods: {

		getLSeat() {
			let list = [];
			for (let i = 1; i <= 120; i++) {
				list.push({id: i, select: false});
			}
			this.lSeat = list;
		},

		onClickSeat(index) {
			this.lSeat[index].select = !this.lSeat[index].select;
		},

		btnBuy() {
			uni.navigateTo({url: "/pages/index/order"})
		}

	}

}
</script>

<style	lang="scss" scoped>
.content{
	overflow-y:scroll;
	background-color: #f5f5f5;
}
.seat-box-context-page{
	height: px2vw(240);
	width: 100vw;
	position: relative;
}
.screen-title{
	text-align: center;
	font-size: px2vw($fz12);
	color: #888;
	height:px2vw(40);
	line-height: px2vw(40);
}
.pure_top {
	width: 379rpx;
	height: 10px;
	border: 6rpx solid #F24244;
	border-radius: 50% 50% 0 0/100% 100% 0 0;
	border-bottom: none;
	margin: 0 auto;
}
.center-title{
	color: #888;
	margin: 0 auto;
	text-align: center;
	.txt{
		border: px2vw(1) solid #ddd;
		font-size: px2vw($fz12);
		padding:px2vw(5) px2vw(5)
	}
}
.seat-box-context{
	height: px2vw(240);
	width: px2vw(300);
	margin: px2vw(10) auto 0 px2vw(50);
	overflow: hidden;
}
.left-seat{
	width: px2vw(15);
	background-color: #ccc;
	text-align: center;
	font-size: px2vw($fz12);
	position: absolute;
	left: px2vw(15);
	top: px2vw(5);
	border-radius: px2vw(10);
	.t-text{
		padding: px2vw(5) 0;
		font-size: px2vw($fz12);
		color: #fff;
	}
}
	.header-open-list{
			width: px2vw(375);
			margin: px2vw(10) 0 0 auto;
			.item{
						height: px2vw(66);
						width: 100%;
						position: relative;
						text-indent: px2vw(15);
						color: #000;
						 .title{
							 font-size: px2vw($fz18);
							 padding-top: px2vw(5);
							 font-weight: 600;
						 }
						 }
						.t-content{
							font-size: px2vw($fz14);
							padding-top:px2vw(5); 
							color: #888;
							.time-txt{
									color: #F24244;
									padding-right:px2vw(5); 
							}
				}
	}
	.n-line{
		background-color: #F7BD8E;
		height: px2vw(35); 
		line-height: px2vw(35); 
		font-size: px2vw($fz14);
		color: #A5743F;
		text-align: center;
	}
	.btn-footer-pay-cover {
		width: 100%;
		min-height: px2vw(135);	
	}
	.btn-footer-pay{
		min-height: px2vw(135);
		width: px2vw(375);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
		background-color: #ffff;
		border-top-left-radius: px2vw(15);
		border-top-right-radius: px2vw(15);
		
		.f-text{
			 font-size: px2vw($fz12);
			 padding: px2vw(16);
			 color: #808080;
			 .t-txt{
				 color: #FA9529;
				 font-size: px2vw($fz13);
			 }
		}

		.btn-pay{
			height: px2vw(45);
			line-height: px2vw(45);
			width: px2vw(345);
			margin:0 auto;
			border-radius: px2vw(10);
			background-color: #F24244;
			color: #FFF;
			text-align: center;
			font-size: px2vw($fz14);
		}

		.btn-pay[disabled]:not([type]) {
			background-color: #E7E7E7;
			color: #fff;
		}

	}
	.seat-item{
		position: relative;
		margin: 0 auto;
		background-color: #f5f5f5;
		.item{
			height: px2vw(20);
			width: px2vw(20);
			border-radius:px2vw(6);
			position: relative;
			background-color: #fff;
			margin: px2vw(5);
			float: left;
		}
		.item-select {
			height: px2vw(20);
			width: px2vw(20);
			border-radius:px2vw(6);
			position: relative;
			background:rgb(242,66,68);
			margin: px2vw(5);
			float: left;
			color: #FFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.movable-view {
		width: px2vw(500);
		height: px2vw(270);
	}
	.seat-list-box{
		padding: px2vw(15) 0;
		display: flex;
		margin: 0 auto;
		height:px2vw(20);
		line-height: px2vw(20);
		 .box{
				height:px2vw(20);
				width: px2vw(20);
				border-radius: px2vw(5);
				background-color: #fff;
				margin-left: px2vw(10);
		 }
		 .boxbg{
			 background-color: #D0D0D0;
		 }
		 .boxbgred{
			 background-color: #F24244;
			 text-align: center;
			 color: #fff;
		 }
		 .noleft{
			 margin-left:px2vw(2);
		 }
		 .text{
			 font-size: px2vw($fz12);
			 color: #333;
			 padding-left: px2vw(6);
		 }
	}
</style>
